/*
 * Default variables
 */

$val-sm: 100px;
$val-md: 80px;
$val-lg: 100vw;




/**
 * Duration
 */

[aos]{
  @for $i from 1 through 60 {
    body[aos-duration='#{$i*50}'] &, &[aos][aos-duration='#{$i*50}']{
      transition-duration: #{$i*50}ms;
    }
  }
}

/**
 * Delay
 */

[aos]{
  @for $i from 1 through 60 {
    body[aos-delay='#{$i*50}'] &, &[aos][aos-delay='#{$i*50}']{
      transition-delay: 0;

      &.aos-animate{
        transition-delay: #{$i*50}ms;
      }
    }
  }
}




/**
 * Fade animations:
 * fade
 * fade-up, fade-down, fade-left, fade-right
 * fade-up-right, fade-up-left, fade-down-right, fade-down-left
 */

[aos^='fade'][aos^='fade'] {
  opacity: 0; transition-property: all;
  &.aos-animate {opacity: 1;}
}

[aos='fade-up'] {
  transform: translate(0,$val-sm);
  &.aos-animate {transform: translate(0,0);}
}

[aos='fade-down'] {
  transform: translate(0,-$val-sm);
  &.aos-animate {transform: translate(0,0);}
}

[aos='fade-right'] {
  transform: translate(-$val-sm,0);
  &.aos-animate {transform: translate(0,0);}
}

[aos='fade-left'] {
  transform: translate($val-sm,0);
  &.aos-animate {transform: translate(0,0);}
}

[aos='fade-up-right'] {
  transform: translate(-$val-sm,$val-sm);
  &.aos-animate {transform: translate(0,0);}
}

[aos='fade-up-left'] {
  transform: translate($val-sm,$val-sm);
  &.aos-animate {transform: translate(0,0);}
}

[aos='fade-down-right'] {
  transform: translate(-$val-sm,-$val-sm);
  &.aos-animate {transform: translate(0,0);}
}

[aos='fade-down-left'] {
  transform: translate($val-sm,-$val-sm);
  &.aos-animate {transform: translate(0,0);}
}

/**
 * Zoom animations:
 * zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right
 * zoom-out, zoom-out-up, zoom-out-down, zoom-out-left, zoom-out-right
 */

[aos^='zoom'][aos^='zoom'] {
  opacity: 0; transition-property: all;
  &.aos-animate {opacity: 1;}
}

[aos='zoom-in'] {
  transform: scale(.6);
  &.aos-animate {transform: scale(1);}
}

[aos='zoom-in-up'] {
  transform: translate(0,$val-sm) scale(.6);
  &.aos-animate {transform: translate(0,0) scale(1);}
}

[aos='zoom-in-down'] {
  transform: translate(0,-$val-sm) scale(.6);
  &.aos-animate {transform: translate(0,0) scale(1);}
}

[aos='zoom-in-right'] {
  transform: translate(-$val-sm,0) scale(.6);
  &.aos-animate {transform: translate(0,0) scale(1);}
}

[aos='zoom-in-left'] {
  transform: translate($val-sm,0) scale(.6);
  &.aos-animate {transform: translate(0,0) scale(1);}
}

[aos='zoom-out'] {
  transform: scale(1.2);
  &.aos-animate {transform: scale(1);}
}

[aos='zoom-out-up'] {
  transform: translate(0,$val-sm) scale(1.2);
  &.aos-animate {transform: translate(0,0) scale(1);}
}

[aos='zoom-out-down'] {
  transform: translate(0,-$val-sm) scale(1.2);
  &.aos-animate {transform: translate(0,0) scale(1);}
}

[aos='zoom-out-right'] {
  transform: translate(-$val-sm,0) scale(1.2);
  &.aos-animate {transform: translate(0,0) scale(1);}
}

[aos='zoom-out-left'] {
  transform: translate($val-sm,0) scale(1.2);
  &.aos-animate {transform: translate(0,0) scale(1);}
}




/**
 * Slide animations
 */


[aos='slide-up'] {
  transform: translate(0,100%);
  &.aos-animate {transform: translate(0,0);}
}

[aos='slide-down'] {
  transform: translate(0,-100%);
  &.aos-animate {transform: translate(0,0);}
}

[aos='slide-right'] {
  transform: translate(-100%,0);
  &.aos-animate {transform: translate(0,0);}
}

[aos='slide-left'] {
  transform: translate(100%,0);
  &.aos-animate {transform: translate(0,0);}
}




/**
 * Flip animations:
 * flip-left, flip-right, flip-up, flip-down
 */

[aos^='flip'] {
  backface-visibility: hidden;
}

[aos='flip-left'] {
  transform: perspective(2500px) rotateY(-100deg);
  &.aos-animate {transform: perspective(2500px) rotateY(0);}
}

[aos='flip-right'] {
  transform: perspective(2500px) rotateY(100deg);
  &.aos-animate {transform: perspective(2500px) rotateY(0);}
}

[aos='flip-up'] {
  transform: perspective(2500px) rotateX(-100deg);
  &.aos-animate {transform: perspective(2500px) rotateX(0);}
}

[aos='flip-down'] {
  transform: perspective(2500px) rotateX(100deg);
  &.aos-animate {transform: perspective(2500px) rotateX(0);}
}